<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="aui-fullpage">
  <div class="aui-header-1">
    <lv-group lvGutter="8px">
      <h1>{{ 'system_user_quota_label' | i18n }}</h1>
      <aui-multi-cluster-switch
        (onChange)="onChange()"
      ></aui-multi-cluster-switch>
    </lv-group>
  </div>
  <div class="aui-block aui-paginator-container">
    <div class="aui-operation">
      <lv-group> </lv-group>
      <lv-group lvGutter="8px">
        <lv-group lvGutter="8px">
          <button
            class="aui-button-icon"
            lv-button
            lvSize="auto"
            (click)="dataTable.fetchData()"
          >
            <i lv-icon="lv-icon-refresh" [lvColorState]="true"></i>
          </button>
        </lv-group>
      </lv-group>
    </div>
    <div class="list-container">
      <lv-pro-table
        #dataTable
        [config]="tableConfig"
        [data]="tableData"
      ></lv-pro-table>
    </div>
  </div>
</div>

<ng-template #userTypeTpl let-item>
  {{ item.userType | textMap: 'loginUserType' }}
</ng-template>

<ng-template #backupCapacity let-item>
  <ng-container *ngIf="item.backupTotalQuota === -1">
    {{ 'protection_unlimited_quota_label' | i18n }}
  </ng-container>
  <div style="width: 75%" *ngIf="item.backupTotalQuota !== -1">
    <lv-progress
      [lvValue]="item.backupUsedPercent"
      [lvSize]="'small'"
      [lvColors]="progressBarColor"
      [lvLabel]="progressLabelTpl"
      [lvExtra]="progressExtraTpl"
      lvDecimals="3"
    ></lv-progress>
    <div class="size-percent">
      {{
        item.backupUsedQuota
          | capacityCalculateLabel: '1.1-3':unitconst.BYTE:true
      }}/{{
        item.backupTotalQuota
          | capacityCalculateLabel: '1.1-3':unitconst.BYTE:true
      }}
    </div>
  </div>
</ng-template>

<ng-template #progressExtraTpl>
  <div class="alarm-threashold" [ngStyle]="{ width: '80%' }"></div>
</ng-template>

<ng-template #progressLabelTpl let-data>
  {{ data < 0.001 ? (data == 0 ? 0 : lessThanLabel + '0.001') : data }}%
</ng-template>

<ng-template #archiveCapacity let-item>
  <ng-container *ngIf="item.cloudArchiveTotalQuota === -1">
    {{ 'protection_unlimited_quota_label' | i18n }}
  </ng-container>
  <div style="width: 75%" *ngIf="item.cloudArchiveTotalQuota !== -1">
    <lv-progress
      [lvValue]="item.archiveUsedPercent"
      [lvSize]="'small'"
      [lvColors]="progressBarColor"
      [lvLabel]="progressLabelTpl"
      [lvExtra]="progressExtraTpl"
      lvDecimals="3"
    ></lv-progress>
    <div class="size-percent">
      {{
        item.cloudArchiveUsedQuota
          | capacityCalculateLabel: '1.1-3':unitconst.BYTE:true
      }}/{{
        item.cloudArchiveTotalQuota
          | capacityCalculateLabel: '1.1-3':unitconst.BYTE:true
      }}
    </div>
  </div>
</ng-template>
